<template>
    <div class="member_page">
        <Table
          :need-operation-area="true"
          :pSize="pageSize"
          :tPage="total"
          :table-model="tableModel"
          :table-data="tableData"
          :currentPage="currentPage"
          :needRemove="false"
          :needEdit="true"
          tableEditText="编辑查看"
          @edit="handleEdit"
          @changePage="handleChangePage"
          @handleSizeChange="handleSizeChange"
        />
        <Modal
            :ruleForm="userinfo"
            v-if="dialogTableVisible"
            :isShowModal="dialogTableVisible"
            @modalCancel="modalCancel"
            @modalSure="modalSure"
        />
    </div>
</template>

<script>
import Modal from './changeUserInfo.vue'
import Table from '@/components/table.vue'
import {getworkerList,changeWorkerinfo}  from '@/api'
export default {
  name:'memberList',
    components:{
        Table,Modal
    },
    data(){
        return{
          dialogTableVisible:false,
          // dictList:[{code:1,dictName:'男'},{code:0,dictName:'女'}]
          tableModel: [
          { attribute: 'id', dontSort: true, type: 'normal', title: '工作人员ID' },
          { attribute: 'username', dontSort: true, type: 'normal', title: '用户名' },
          { attribute: 'workerName', dontSort: true, type: 'normal', title: '姓名' },
          { attribute: 'workerPhone', dontSort: true, type: 'normal', title: '联系方式' },
          { attribute: 'gender', dontSort: true, type: 'normal', title: '性别', },
          { attribute: 'imageUrl', dontSort: true, type: 'normal', title: '证件照' },
          { attribute: 'type', dontSort: true, type: 'normal', title: '员工类型' },
          { attribute: 'deptName', dontSort: true, type: 'normal', title: '所属部门' }
        ],
        tableData: [],
        total: 0,
        pageSize: 10,
        currentPage: 1,
        userinfo:{},
        }
    },
    created(){
      this.initTableData()
    },
    methods:{
      handleEdit(row){
        this.userinfo=row
        this.dialogTableVisible=true
      },
        initTableData(){
          getworkerList(this.currentPage).then(res=>{
            // console.log(res)
            if(res.code==200&&res.data){
              this.tableData=res.data
              this.total= parseInt(res.msg)
            }
          })
        },
        modalCancel(){
            this.dialogTableVisible=false
        },
        modalSure(row){
            changeWorkerinfo(row).then(res=>{
                if(res.code==200){
                  this.initTableData();
                  this.$message.susccess(res.msg);
                    this.dialogTableVisible=false
                }
            })

        },
        // 当前页
      handleChangePage(page) {
        this.currentPage = page
        this.initTableData()
      },
      // 每页显示多少
      handleSizeChange(limit) {
        this.pageSize = limit
        this.initTableData()
      }
    }
}
</script>
<style lang="less">
.member_page{
  padding: 10px;
  .user_box{
      width: 100%;
      .item{
          width: 100%;
          height: 50px;
          box-sizing: border-box;
          display: flex;
          border-bottom: 1px dashed #efefef;
          .label{
              width: 30%;
              line-height: 50px;
          }
          .value{
              width: 70%;
              line-height: 50px;
              text-align: right;
          }
      }
  }
}
  
</style>